import { Suspense } from 'react'
import {BrowserRouter as Router, Routes, Route,Navigate} from "react-router-dom";
import Loading from '@/component/Loading/loading'
import Login from '@/pages/login/login'

// @ts-ignore
import routeModuleList from '@/router/mergeRouting'
import {observer} from 'mobx-react-lite'
import { useStores } from '@/stores'
import {generateRoutes} from "./AuthRouter"

function App(){

  const {userStores} = useStores()
  const routeRecursiveSorting = arr => {
        return  arr.map((item) => {
          return (
            <Route key={item.name} path={item.path} element={
              <Suspense fallback={<Loading/>}>
                <item.component/>
              </Suspense>
            } >
              {
                item.routes&&routeRecursiveSorting(item.routes)
              }
            </Route>
          )
        })
  }

    return (
        <Router>
            <Suspense fallback={<Loading/>}>
                <Routes>
                  {userStores.info.jurisdiction && routeRecursiveSorting(generateRoutes(routeModuleList,userStores.info.jurisdiction))}
                  <Route path="/login" element={<Login/>} />
                    <Route path="*" element={<Navigate to="/login" />} />
                </Routes>
            </Suspense>
        </Router>
    )
}

export default observer(App)
